<!DOCTYPE html>
<html lang="zh_CN">
<head>
	<title>our home</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">

	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/bootstrap-fileupload.min.css">

	<!-- Custom styles for this template -->
	<link href="carousel.css" rel="stylesheet">

	<link rel="stylesheet" href="css/style.css"></head>
	<link rel="stylesheet" href="css/scojs.css"></head>
	<link rel="stylesheet" href="kde/themes/default/default.css" />

	<!--[if lt IE 9]>
	<script src="js/html5shiv.js"></script>
	<script src="js/respond.min.js"></script>
	<![endif]-->
</head>

<body >

	<header>

		<div class="navbar navbar-default navbar-fixed-top">
			<div class="container">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="index.html"> <strong>我的家</strong>
					</a>
				</div>
				<div class="navbar-collapse collapse">
					<ul class="nav navbar-nav">
						<li>
							<a href="see.html">看看</a>
						</li>
						<li class="active">
							<a href="say.html">说说</a>
						</li>
						<li>
							<a href="write_all.html">记记</a>
						</li>
						<li>
							<a href="timer.html">Time</a>
						</li>
						<li>
							<a href="contact.html">联系我哦</a>
						</li>
					</ul>
					<ul class="nav navbar-nav navbar-right">
						<p id="world"  class="navbar-text">
							<span class="dash">还有:</span>
							<span class="dash weeks_dash">
								<span class="digit text-info">0</span>
								<span class="digit text-info">0</span>
								周
							</span>
							
							<span class="dash days_dash">
								<span class="digit text-info">0</span>
								<span class="digit text-info">0</span>天
							</span>
							
							<span class="dash hours_dash">
								<span class="digit text-info">0</span>
								<span class="digit text-info">0</span>小时
							</span>
							
							<span class="dash minutes_dash">
								<span class="digit text-info">0</span>
								<span class="digit text-info">0</span>分
							</span>
							
							<span class="dash seconds_dash">
								<span class="digit text-info">0</span>
								<span class="digit text-info">0</span>
								秒
							</span>
							
						</p>
						<li>
							<a href="#" data-toggle="modal" data-target="#login_div">登录</a>
						</li>

						<li>
							<a href="#"data-toggle="modal" data-target="#reg_div">注册</a>
						</li>
					</ul>
				</div>

			</div>
		</div>

	</header>
	
	<div class="jumbotron" style="background-color:#3E444C">
		<div class="container">
			<div class="row">
				<div class="col-lg-10">
					<h1> <strong class="text-info">欢迎说说</strong>
						<small class="text-info">看看我们都在谈论什么,你也可以参与哦....</small>
					</h1>
				</div>
				
			</div>
		</div>

	</div>

	<!-- Marketing messaging and featurettes
    ================================================== -->
	<!-- Wrap the rest of the page in another container to center all the content. -->

	<div class="container marketing">

		

		<section>
			<div class="row">
				<div class="col-lg-3">
				<div class="list-group pinned">
					<div class="list-group-item text-center">
						<img class="img-thumbnail" data-src="holder.js/140x140" alt="100x100">
						<div class="caption">
							<h4 class="text-info">
								<strong>妈妈</strong>
							</h4>
							<hr>
							<p class="list-group-item-text">
							<a class="text-info" href="write_list.html">我的记记</a>&nbsp;
							<a class="text-info" href="say_list.html">我的说说</a>&nbsp;
							<a class="text-info" href="say.html">说说</a>&nbsp;
							<a class="text-info" href="write.html">记记</a>
						</p>
						</div>
					</div>
				</div>
			</div>
				<div class="col-lg-9">
					<div class="panel panel-primary">
						<div class="panel-body">
							<div class="media">
								<a class="pull-left" href="#">
									<img class="media-object" src="" alt="64x64"></a>
								<div class="media-body">
									<h4 class="media-heading text-success">妈妈:</h4>
									<p class="text-info hs-content">
										今天妈妈去检查了，听了小张张的心跳声，声音砰砰砰的响个不停，真像个小火车，宝宝很健康，妈妈很开心妈妈很开心........
										<span class="pull-right">
											<a class="btn btn-success btn-xs hs-btn">
												<span class="glyphicon glyphicon-comment" data-placement="bottom" data-toggle="tooltip" data-original-title="回说"></span>
											</a>
											<a href="" class="btn btn-danger btn-xs hs-del">
												<span class="glyphicon glyphicon-trash" data-placement="bottom" data-toggle="tooltip" data-original-title="删除"></span>
											</a>
											&nbsp;
											<small id="time1" class="text-info">2013-09-30 11:20:12</small>
										</span>
									</p>
									<hr>			
									<div class="media">
										<a class="pull-left" href="#">
											<img class="media-object" src="" alt="64x64"></a>
										<div class="media-body">
											<h4 class="media-heading text-success">爸爸:</h4>
											<p class="text-info hs-content">
												小张张越来越大啦，很期待你哦.
												<span class="pull-right">
													<a class="btn btn-success btn-xs hs-btn">
														<span class="glyphicon glyphicon-comment" data-placement="bottom" data-toggle="tooltip" data-original-title="回说"></span>
													</a>
													<a href="" class="btn btn-danger btn-xs hs-del">
														<span class="glyphicon glyphicon-trash" data-placement="bottom" data-toggle="tooltip" data-original-title="删除"></span>
													</a>
													&nbsp;
													<small class="text-info">2013-09-30 11:22:15</small>
												</span>
											</p>

										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			
			</div>
			
		</section>

		<hr class="">

		<!-- /END THE FEATURETTES -->

		<!-- FOOTER -->
		<section class="text-center">
			<footer>
				<address>
					<strong>张小张版权所有 Copyright@2013-2999.All Rights Reserved.</strong>
					<br/>
					<strong>邮箱</strong>
					<a href="mailto:guying1028@gmail.com">guying1028@gmail.com</a>
					<br>
					<small class="text-primary">建议：请使用ie9+、firefox、chrome浏览器浏览，以获得更好的浏览效果</small>
				</address>
			</footer>
		</section>

	</div>
	<!-- /.container -->

	<!--新登录开始-->
	<div id="login_div" class="modal fade" tabindex="-1" style="display: none;">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close text-primary" data-dismiss="modal" aria-hidden="true">×</button>
					<h4 class="modal-title text-info">欢迎登录</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal text-info text-center" role="form" id="login_form" action="js/valid.json">
						<div class="row">
							<div class="col-sm-offset-1 col-md-11">
								<div class="form-group">
									<label for="inputEmail3" class="col-sm-3 control-label">用户名</label>
									<div class="col-sm-5">
										<input type="text" class="form-control" id="username" name="username" placeholder="Username"></div>
									<label class="col-sm-3 control-label text-warning">
										<strong class="pull-left">*</strong>
									</label>
								</div>
								<div class="form-group">
									<label for="inputPassword3" class="col-sm-3 control-label">密码</label>
									<div class="col-sm-5">
										<input type="password" class="form-control" id="pass" name="pass" placeholder="Password"></div>
									<label class="col-sm-3 control-label pull-left text-warning">
										<strong class="pull-left">*</strong>
									</label>
								</div>
								<div class="form-group">
									<div class="col-sm-offset-3 col-sm-5">
										<button class="btn btn-success pull-right" type="submit" id="login_btn">
											<span class="glyphicon glyphicon-ok"></span>
											&nbsp;&nbsp;登入
										</button>
										<button type="button" class="btn btn-danger" data-dismiss="modal">暂不</button>
									</div>
								</div>
							</div>

						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
	<!--新登录结束-->

	<!-- 注册开始 -->
	<!-- 注册表单验证参考登录的来做 -->
	<div id="reg_div" class="modal fade login-bg" tabindex="-1" style="display: none;">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close text-primary" data-dismiss="modal" aria-hidden="true">×</button>
					<h4 class="modal-title text-info">欢迎留下你的足迹</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" role="form" id="reg_form">
						<div class="form-group text-center">
							<label for="inputEmail3" class="col-sm-3 control-label">用户头像</label>
							<div class="col-sm-6">
								<div class="fileupload fileupload-new" data-provides="fileupload">
									<div class="fileupload-new thumbnail" style="width: 150px; height: 150px;">
										<img src="" data-src="holder.js/150x150" alt="100x100"></div>
									<div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 150px; max-height: 150px; line-height: 20px;"></div>
									<div>
										<span class="btn btn-file">
											<span class="btn btn-success fileupload-new">选择头像</span>
											<span class="btn btn-success fileupload-exists">修改头像</span>
											<input type="file" />							
										</span>
										<a href="#" class="btn btn-danger fileupload-exists" data-dismiss="fileupload">删除头像</a>
									</div>
								</div>
							</div>
						</div>
						<div class="form-group">
							<label for="inputEmail3" class="col-sm-3 control-label">用户名</label>
							<div class="col-sm-6">
								<input type="text" class="form-control" id="inputEmail3" placeholder="Username"></div>
							<label class="col-sm-1 control-label  text-warning">
								<strong class="pull-left">*</strong>
							</label>
						</div>
						<div class="form-group">
							<label for="inputEmail3" class="col-sm-3 control-label">EMAIL</label>
							<div class="col-sm-6">
								<input type="email" class="form-control" id="inputEmail3" placeholder="Email"></div>
							<label class="col-sm-1 control-label text-warning">
								<strong class="pull-left">*</strong>
							</label>
						</div>
						<div class="form-group">
							<label for="inputPassword3" class="col-sm-3 control-label">密码</label>
							<div class="col-sm-6">
								<input type="password" class="form-control" id="inputPassword3" placeholder="Password"></div>
							<label class="col-sm-1 control-label text-warning">
								<strong class="pull-left">*</strong>
							</label>
						</div>
						<div class="form-group">
							<label for="inputPassword3" class="col-sm-3 control-label">重复密码</label>
							<div class="col-sm-6">
								<input type="password" class="form-control" id="inputPassword3" placeholder="RePassword"></div>
							<label class="col-sm-1 control-label text-warning">
								<strong class="pull-left">*</strong>
							</label>
						</div>
						<div class="form-group">
							<div class="col-sm-offset-3 col-sm-6">
								<button type="button" class="btn btn-danger" data-dismiss="modal">暂不</button>
								<button class="btn btn-success pull-right" type="submit">
									<span class="glyphicon glyphicon-ok"></span>
									&nbsp;&nbsp;注册
								</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
	<!-- 隐藏域用来传递自己要用的额外参数 -->
	<input type="hidden" id="hs_id" value="sg123">
	<!-- 注册结束 -->

	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/jquery.form.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/bootstrap-fileupload.min.js"></script>
	<script type="text/javascript" src="js/bootbox.js"></script>
	<script type="text/javascript" src="js/sco.message.js"></script>
	<script type="text/javascript" src="js/sco.valid.js"></script>
	<script type="text/javascript" src="js/bootbox.js"></script>
	<script type="text/javascript" src="kde/kindeditor-all-min.js"></script>
	<script type="text/javascript" src="kde/lang/zh_CN.js"></script>
	<script type="text/javascript" src="js/jquery.lwtCountdown-1.0.js"></script>

	<script src="js/holder.js"></script>
	<script type="text/javascript">
		$(function(){
			//倒计时的
            $('#world').countDown({
					targetDate: {
						'day': 		13,
						'month': 	3,
						'year': 	2014,
						'hour': 	0,
						'min': 		0,
						'sec': 		0					
					}
				});
			$('.row').tooltip({
      			selector: "[data-toggle=tooltip]",
      			container: "body"
    		});
    		
			//说说按钮提交事件
			$("#saysay").on('click', function(event) {
				event.preventDefault();
				var say_content = $("#say_content").val();
				if (say_content==null||say_content=='') {
				    $.scojs_message('总得说点什么吧....', $.scojs_message.TYPE_ERROR);
				    return false;
				};
				alert(say_content);
				//下面进行ajax提交保存操作
			});

			//点击回说按钮加载回说框
			$('.hs-btn').click(function() {
				var hs_content = $(this).parent();
				var hs_div = $(hs_content).next('div');
				//判断有没有回说框，没有就生成回说框，有就忽略了
				if(hs_div.length==0||hs_div.html()=='undefined'){
					$(this).parents(".hs-content").append('<div class="hs_kuang"><textarea id="re_content" name="re_content"></textarea><div class="col-lg-offset-7 col-lg-3"><button class="btn btn-success btn-xs" onclick="confirmHs(this);">回说</button> <button class="btn btn-info btn-xs" name="remove" onclick="hideHs(this);">暂不</button><label class="re_count"></label></div></div>');
					$.getScript('kde/kindeditor-all-min.js', function() {
						KindEditor.basePath = './kde/';
						var hs_editor = KindEditor.create('textarea[name="re_content"]', {
											themeType : 'simple', 
											resizeType : 1,
											allowPreviewEmoticons : false,
											allowImageUpload : true,
											width : '80%',
											newlineTag:'br',
											items : [
												'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
												'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
												'insertunorderedlist', '|', 'emoticons', 'image', 'link'],
											afterChange : function() {
											      //限制字数
											      var limitNum = 200;  //设定限制字数
											      var pattern = this.count('text')+'/' + limitNum + '字'; 
											      hs_div = $(hs_content).next('div');
											      var re_count = $(hs_div).find('.re_count');
											      $(re_count).html(pattern); //输入显示
											      if(this.count('text') > limitNum) {
												       pattern = ('字数超啦');
												       //超过字数限制自动截取
												       var strValue = hs_editor.text();
												       strValue = strValue.substring(0,limitNum);
												       hs_editor.text(strValue);
											       }
											       $(re_count).html(pattern); //输入显示	
											       var re_self = this;
												   re_self.sync();
												}
											});
						});
				}
			});

			//弹出警告框设置http://bootboxjs.com/#about
			bootbox.setDefaults({
				locale: "zh_CN"
			});
			//点击删除回说内容的时候
			$(".hs-del").on('click', function(event) {
	            event.preventDefault();
	            bootbox.confirm("你确认要删除这条说说吗？", function(result) {
	            	if (result) {
	            		//这里做物理删除操作
	            		alert("已删除"+result);		
	            	};
	            });
	          });
			//登录验证：具体配置参考http://www.bootcss.com/p/sco.js/#valid
		      $("#login_form").scojs_valid({
				 	rules: {username:['not_empty', {'min_length': 4}],pass: ['not_empty']},
				 	onFail: function(response, validator, $login_form) {
				 		alert("fail");
				 		return ;
				 	},
				 	onError: function(response, validator, $login_form) {
				 		alert("error");
				 		return ;
				 	}
				});
		});
	</script>
	<script>
			//富文本编辑框
			var editor;
			KindEditor.ready(function(K) {
				editor = K.create('textarea[name="say_content"]', {
					themeType : 'simple',
					resizeType : 1,
					allowPreviewEmoticons : false,
					allowImageUpload : true,
					width : '100%',
					newlineTag:'br',
					items : [
						'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
						'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
						'insertunorderedlist', '|', 'emoticons', 'image', 'link'],
					afterChange : function() {
				      //限制字数
				      var limitNum = 200;  //设定限制字数
				      var pattern = this.count('text')+'/' + limitNum + '字'; 
				      $('#hs_count').html(pattern); //输入显示
				      if(this.count('text') > limitNum) {
					       pattern = ('字数超过限制，请适当删除部分内容');
					       //超过字数限制自动截取
					       var strValue = editor.text();
					       strValue = strValue.substring(0,limitNum);
					       editor.text(strValue);
				       }
				       $('#hs_count').html(pattern); //输入显示	
				       var self = this;
					   self.sync();
					}
				});
			});
	</script>
	<script type="text/javascript">
		//点击回说框的暂不按钮时隐藏回说框
		function hideHs(obj){
			var hs_kuang = $(obj).parents(".hs_kuang");
			$(hs_kuang).remove();
		}
		//点击回说框的提交按钮提交回说内容，请使用ajax提交，动态添加
		function confirmHs(obj){
			var hs_kuang = $(obj).parents(".hs_kuang");
			var re_text = $(hs_kuang).find("textarea")[1];
			var hs_content = $(re_text).val();
			// alert(hs_content);
			if (hs_content==null||hs_content=='') {
			    $.scojs_message('总得说点什么吧....', $.scojs_message.TYPE_ERROR);
			    return false;
			};
			//下面进行ajax提交保存操作
		}
	</script>
</body>

</html>